<template>
  <tm-app>
    <tm-navbar title="创建WIFI码" :followTheme="true" :hideHome="true">
    </tm-navbar>
    <ad unit-id="adunit-e9a53a0843a22cc0"></ad>
    <tm-sheet :round="4" :padding="[20]" :margin="[20]">
      <view class="flex flex-row flex-row-center-between">
        <tm-sheet
          :margin="[0]"
          :padding="[0]"
          _class="flex flex-row flex-row-center-center"
          v-for="item in state.icons"
          :key="item.name"
        >
          <tm-icon :name="item.icon" :follow-theme="true"></tm-icon>
          <tm-text :font-size="24" color="#666" _class="ml-n2">
            {{ item.name }}
          </tm-text>
        </tm-sheet>
      </view>
    </tm-sheet>
    <tm-sheet :margin="[20, 0, 20, 20]" :round="4">
      <view
        class="flex flex-row flex-rw-center-between mb-n6"
        v-for="item in state.promptList"
        :key="item.id"
      >
        <tm-icon name="tmicon-md-planet" color="#666" :font-size="28"></tm-icon>
        <tm-text :font-size="28" color="#666" _class="ml-n4">{{
          item.sysValue
        }}</tm-text>
      </view>
    </tm-sheet>

    <tm-sheet :padding="[0]" :margin="[20, 0]" :round="4">
      <tm-form
        @submit="confirm"
        ref="form"
        v-model="wifiForm"
        layout="vertical"
        :margin="[0]"
        :label-width="190"
      >
        <tm-form-item label="店铺名称" field="merchantName">
          <tm-input
            :inputPadding="[0, 0]"
            v-model="wifiForm.merchantName"
            :transprent="true"
            :showBottomBotder="false"
          >
            <template v-slot:right>
              <tm-icon
                @click="chooseLocation"
                name="tmicon-md-pin"
                :font-size="43"
                :follow-theme="true"
              ></tm-icon>
            </template>
          </tm-input>
        </tm-form-item>
        <tm-form-item
          required
          label="WIFI名称"
          field="wifiName"
          :rules="[
            {
              required: true,
              message: 'WIFI名称不能为空',
              validator: (val) => val.length > 0,
            },
          ]"
        >
          <tm-input
            :inputPadding="[0, 0]"
            v-model.lazy="wifiForm.wifiName"
            :transprent="true"
            :showBottomBotder="false"
          >
            <template v-slot:right>
              <tm-icon
                @click="chooseWifiList"
                name="tmicon-search"
                :font-size="40"
                :follow-theme="true"
              ></tm-icon>
            </template>
          </tm-input>
        </tm-form-item>
        <tm-form-item
          required
          label="WIFI密码"
          field="wifiPassword"
          :rules="[
            {
              required: true,
              message: 'WIFI密码不能为空',
              validator: (val) => val.length > 0,
            },
          ]"
        >
          <tm-input
            :inputPadding="[0, 0]"
            v-model.lazy="wifiForm.wifiPassword"
            :transprent="true"
            :showBottomBotder="false"
          >
          </tm-input>
        </tm-form-item>
        <tm-form-item label="推广链接" :border="false" field="promotionUrl">
          <tm-input
            :inputPadding="[0, 0]"
            v-model.lazy="wifiForm.promotionUrl"
            :transprent="true"
            :showBottomBotder="false"
          >
          </tm-input>
        </tm-form-item>
        <tm-button
          :margin="[30]"
          :round="10"
          block
          :loading="state.loading"
          label="block"
          form-type="submit"
        >
          {{ wifiForm.id ? "编 辑 WIFI 连 接 码" : "创 建 WIFI 连 接 码" }}
        </tm-button>
      </tm-form>
    </tm-sheet>

    <tm-message ref="msg"></tm-message>
  </tm-app>
</template>

<script setup>
import {
  addWifiCodeApi,
  getPromptListApi,
  getWifiCodeInfoApi,
  updWifiCodeApi,
} from "@/api";
import { onLoad } from "@dcloudio/uni-app";

import { reactive, ref } from "vue";
const state = reactive({
  icons: [
    {
      name: "一键快速链接",
      icon: "tmicon-ios-wifi",
    },
    {
      name: "无需告知密码",
      icon: "tmicon-safety-certificate",
    },
    {
      name: "安全防蹭网型磅",
      icon: "tmicon-supervise",
    },
  ],
  promptList: [],

  loading: false,
});

const msg = ref(null);
const wifiForm = reactive({
  merchantName: "",
  wifiName: "",
  wifiPassword: "",
  promotionUrl: "",
});

const form = ref(null);

onLoad(async (params) => {
  // 判断是不是编辑跳转过来的
  if (params.id) {
    getWifiCodeInfoApi({ wifiCodeId: params.id }).then((res) => {
      ["merchantName", "wifiName", "wifiPassword", "promotionUrl"].forEach(
        (key) => {
          wifiForm[key] = res[key];
        }
      );
      wifiForm["id"] = res["id"];
      console.log(wifiForm);
    });
  }
  const res = await getPromptListApi();
  state.promptList = res.promptList;
});
const confirm = async (e) => {
  if (e.validate) {
    state.loading = true;
    if (wifiForm.id) {
      await updWifiCodeApi(wifiForm);
    } else {
      await addWifiCodeApi(wifiForm);
    }
    state.loading = false;
    form.value.reset();
    Object.keys(wifiForm).forEach((key) => {
      wifiForm[key] = "";
    });
    uni.navigateTo({
      url: "/homePages/wifiManager",
    });
  }
};

const chooseLocation = () => {
  uni.chooseLocation({
    success: function (res) {
      wifiForm.merchantName = res.name;
    },
  });
};

const chooseWifiList = () => {
  // 首先判断是否连接Wifi
  uni.getConnectedWifi({
    partialInfo: true,
    success: (res) => {
      wifiForm.wifiName = res.wifi.SSID;
      msg.value.show({ model: "success", text: "获取到当前连接的WIFI" });
    },
    fail: () => {
      let platform = uni.getSystemInfoSync().platform;
      if (platform == "ios") {
        msg.value.show({ model: "error", text: "请先连接共享WIFI" });
        return;
      }
      msg.value.show({ model: "load", text: "获取WIFI中请稍后" });
    },
  });
};
</script>

<style scoped></style>
